<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
       <!-- // 注意编辑按钮，使用的是默认插槽default，默认插槽控制的是右侧内容 -->
      <van-button 
      size="mini" 
      round 
      type="danger" 
      class="edit-btn"
      plain
      @click="isEdit = !isEdit"
      >{{ isEdit ? '完成': '编辑' }}</van-button>
    </van-cell>
    <van-grid class='my-grid' :gutter="10">
      <van-grid-item
      class="grid-item"
        v-for="(channel,index) in myChannels"
        :key="index"
        @click="onMyChannelClick(channel,index)"
      >
      <!-- 显示的条件 编辑状态 并且id不等于0 -->
      <van-icon
      v-show="isEdit && !flexdChannels.includes(channel.id)"
      slot="icon"
      name="clear"
      ></van-icon>
      <span class="text" :class="{active:index===active}" slot="text">{{channel.name}}</span>
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class='recommend-grid' :gutter="10">
      <van-grid-item
      class="grid-item"
        v-for="(channel, index) in recommendChannels"
        :key="index"
        icon='plus'
        :text="channel.name"
        @click="onAddChannel(channel)"
      />
    </van-grid>
    <!-- /频道推荐 -->
  </div>
</template>

<script>
// 剩余频道 所有频道列表 - 我的频道 = 剩余推荐的频道。
// user storage
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
import {getAllChannels,addUserChannel,deleteUserChannel} from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
      myChannels:{
          type: Array,
          required: true
      },
      active:{
          type:Number,
          required: true
      }
  },
  data () {
    return {
        allChannels:[],//全部频道
        isEdit:false,//控制编辑状态
        flexdChannels:[0],//固定频道不让删除
    }
  },
  computed: {
    ...mapState(['user']),
      recommendChannels(){
        //   在计算属性中定义计算剩余频道的方法 监听数据的修改
        // 方法一 使用forEach便利数组 每一个全部频道的数据和我的频道的全部数据进行 对比 一样排除 不一样添加到定义的数组里 最后在便利结束返回这个数组
        // const channels = [];
        // this.allChannels.forEach(channel=>{
        //     const ret =this.myChannels.find(myChannel=>{
        //         return myChannel.id===channel.id;
        //     })
        //     if (!ret) {
        //         channels.push(channel)
        //     }
        // })
        // return channels
        // 方法二 使用 filter 过滤方法把符合条件的元素返回到新数组里
        return this.allChannels.filter(channel=>{
            return !this.myChannels.find(myChannel=>{
                return myChannel.id===channel.id
            })
        })
      }
  },
  watch: {},
  created () {
      this.loadAllChannels()
  },
  mounted () {},
  methods: {
      async loadAllChannels(){
          try{
              const {data} = await getAllChannels()
              // console.log(res);
              this.allChannels = data.data.channels
          }catch(err){

          }
      },
      async onAddChannel(channel) {
          this.myChannels.push(channel)
          // 判断登录没有
          if (this.user) {
              // 以登录
              try{
                await addUserChannel({
                  id:channel.id,//频道的id
                  seq:this.myChannels.length//频道的序号
                })
                this.$toast('添加成功')
              }catch(err){
                this.$toast('添加失败')
              }
          }else {
            // 未登陆
            setItem('TOUTIAO_CHANNELS',this.myChannels)
          }
      },
      onMyChannelClick(channel,index){
        // 点击频道事件 两种状态
        if (this.isEdit) {
          // 编辑状态
          // 判断是不是推荐 是不进行任何操作
          if (this.flexdChannels.includes(channel.id)) {
            return
          }
          // 1.删除频道
          this.myChannels.splice(index,1)
          // 2.如果删除频道 是激活频道之前的频道 就让index索引减一
          if (index <= this.active) {
              // 让父组件操作  参数有2 1当前频道减一的索引用来改变显示的频道是哪一个 2不让其关闭弹出层
              this.$emit('update-active',this.active-1,true)
          }
          this.deleteChannel(channel);
        }else {
          // 非编辑状态 参数3 让其关闭弹出层
          this.$emit('update-active',index,false)
        }
      },
      async deleteChannel(channel){
        try{
          if (this.user) { // 以登录将数据存储到线上
            await deleteUserChannel(channel.id)
          }else{//未登陆将数据存储到本地
          setItem('TOUTIAO_CHANNELS',this.myChannels)

          }
         
          
        }catch(e){
          console.log(e);
          this.$toast('删除频道失败')
        }
      }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
	padding: 85px 0;
    .title-text {
		font-size: 32px;
		color: #333333;
        
	}
    /deep/ .recommend-grid {
    .grid-item {
        
        .van-grid-item__content {
            flex-direction: row;
            .van-icon-plus {
                font-size: 28px;
                margin-right: 6px;
            }
            // .van-grid-item__text {
            //     margin-top: 0;
            // }
        }
    }
}
    .edit-btn {
		width: 104px;
		height: 48px;
		font-size: 26px;
		color: #f85959;
		border: 1px solid #f85959;
	}
    /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
        white-space: nowrap;
        background-color: #f4f5f6;
        .van-grid-item__text,.text {
            font-size: 28px;
            color: #222;
            margin-top: 0;//居中
        }
        .active{
            color:red;
        }
         .van-grid-item__icon-wrapper {
            position: unset;
        }
    }
}
/deep/ .my-grid {
    .grid-item {
        .van-icon-clear {
            position: absolute;
            right: -10px;
            top: -10px;
            font-size: 30px;
            color: #cacaca;
            z-index: 2;
        }
    }
}
}
</style>
